<template>
  <div>
    <el-dialog
      v-model="props.visible"
      title="选择补版内容"
      width="100%"
      @close="handleCancel"
    >
      <div v-if="!statusFlag" style="padding-bottom: 40px">
        <el-form
          :model="queryParams"
          class="flex-box"
          ref="queryRef"
          :inline="true"
        >
          <div>
            <el-form-item label="生产单编码" prop="produceNo">
              <el-input
                v-model.trim="queryParams.produceNo"
                placeholder="请输入生产单编码"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">
                搜索
              </el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </div>
          <el-button
            type="primary"
            plain
            @click="handleSubmit"
            :disabled="multiple"
          >
            确认
          </el-button>
        </el-form>
        <div v-if="orderList.length > 0">
          <div
            class="card"
            v-for="item in orderList"
            :key="item.produceNo"
            @click="handleCellClick(item)"
          >
            <h3 class="card__title">生产单编码: {{ item.produceNo }}</h3>
            <div class="card__content">出版编码: {{ item.pubNo }}</div>
            <div class="card__date">交货日期: {{ item.deliverDate }}</div>
            <div class="card__arrow">
              {{ item.type == 1 ? "封面" : "内文" }}
            </div>
          </div>
        </div>

        <div v-else style="text-align: center">暂无数据</div>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <div v-else>
        <el-page-header @back="goBack">
          <template #content>
            <el-checkbox
              v-model="allChecked"
              @change="changeAll"
              class="text-large font-600 mr-3"
            >
              全选
            </el-checkbox>
          </template>
          <template #extra>
            <el-button
              type="primary"
              plain
              @click="handleSubmit"
              :disabled="multiple"
            >
              确认
            </el-button>
          </template>
        </el-page-header>
        <el-card
          shadow="hover"
          style="margin-top: 10px"
          v-for="(item, index) in printList"
          :key="item.pieceId"
        >
          <!-- 卡片的头部位 -->
          <template #header>
            <div class="card-header">
              <el-checkbox
                v-model="item.checked"
                :label="item.pieceId"
                @change="changeIds(item)"
              >
                {{ item.producePieceNo }}
              </el-checkbox>
            </div>
          </template>
          <!-- 卡片显示的内容 -->
          <div>
            <div class="card-content">
              <div class="header">
                <div>
                  <a class="title" href="#">
                    {{ item.bookName }}
                  </a>
                </div>
                <span class="image">{{ index + 1 }}</span>
              </div>
              <dl class="post-info">
                <dt class="dt">书刊编码：</dt>
                <dt class="dt">{{ item.bookNo }}</dt>
              </dl>
              <dl class="post-info">
                <dt class="dt">印刷方式：</dt>
                <dt class="dt">
                  <dict-tag
                    :options="mes_paper_package"
                    :value="item.printType"
                  />
                </dt>
              </dl>
              <dl class="post-info">
                <dt class="dt">印色：</dt>
                <dt class="dt">
                  <dict-tag
                    :options="ems_order_print_color"
                    :value="item.printColor"
                  />
                </dt>
              </dl>
              <dl class="post-info">
                <dt class="dt">印张：</dt>
                <dt class="dt">
                  {{ item.sheet }}
                </dt>
              </dl>
              <dl class="post-info">
                <dt class="dt">印数：</dt>
                <dt class="dt">
                  {{ item.printAmount }}
                </dt>
              </dl>
              <dl class="post-info">
                <dt class="dt">贴标：</dt>
                <dt class="dt">
                  <el-tag>{{ item.pieceView }}</el-tag>
                </dt>
              </dl>
            </div>
          </div>
        </el-card>
        <!-- <el-row :gutter="20" style="overflow: auto">
                    <el-col :span="16">
                        <el-table
                            ref="orderRef"
                            v-loading="loadingInfo"
                            :data="printList"
                            row-key="pieceId"
                            stripe
                            border
                            style="cursor: pointer"
                            height="420px"
                            @selection-change="handleSelectionChange"
                        >
                            <el-table-column
                                type="selection"
                                :reserve-selection="true"
                                width="55"
                            />
                            <el-table-column label="序号" width="55" type="index" align="center" />
                            <el-table-column
                                label="书刊名称"
                                align="center"
                                :show-overflow-tooltip="true"
                                prop="bookName"
                            ></el-table-column>
                            <el-table-column
                                label="书刊编码"
                                align="center"
                                :show-overflow-tooltip="true"
                                prop="bookNo"
                            ></el-table-column>
                            <el-table-column
                                label="印刷方式"
                                align="center"
                                :show-overflow-tooltip="true"
                                prop="printType"
                            >
                                <template #default="scope">
                                    <dict-tag
                                        :options="mes_paper_package"
                                        :value="scope.row.printType"
                                    />
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="印色"
                                align="center"
                                :show-overflow-tooltip="true"
                                prop="printColor"
                            >
                                <template #default="scope">
                                    <dict-tag
                                        :options="ems_order_print_color"
                                        :value="scope.row.printColor"
                                    />
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="印张"
                                align="center"
                                :show-overflow-tooltip="true"
                                prop="sheet"
                            ></el-table-column>
                            <el-table-column
                                label="贴标"
                                align="center"
                                :show-overflow-tooltip="true"
                                prop="pieceView"
                            ></el-table-column>
                            <el-table-column
                                label="印数"
                                align="center"
                                :show-overflow-tooltip="true"
                                prop="printAmount"
                            ></el-table-column>
                        </el-table>
                    </el-col>
                </el-row> -->
      </div>

      <!-- <el-row :gutter="20" style="overflow: auto">
                <el-col :span="8">
                    <el-table
                        v-loading="loading"
                        :data="orderList"
                        stripe
                        border
                        style="cursor: pointer"
                        @row-click="handleClick"
                        row-key="produceId"
                        @selection-change="handleSelectionChange"
                        ref="orderListTable"
                        highlight-current-row
                    >
                        <el-table-column type="selection" :reserve-selection="true" width="55" />
                        <el-table-column
                            label="生产单编码"
                            align="center"
                            :show-overflow-tooltip="true"
                            prop="produceNo"
                        ></el-table-column>
                        <el-table-column
                            label="出版编码"
                            align="center"
                            :show-overflow-tooltip="true"
                            prop="pubNo"
                        ></el-table-column>
                        <el-table-column
                            label="类型"
                            align="center"
                            :show-overflow-tooltip="true"
                            prop="type"
                        >
                            <template v-slot="{ row }">
                                <el-tag :type="row.type == 1 ? 'success' : ''" effect="dark">
                                    {{ row.type == 1 ? '封面' : '内文' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="16">
                    <el-table
                        ref="orderRef"
                        v-loading="loadingInfo"
                        :data="printList"
                        row-key="paperid"
                        stripe
                        border
                        style="cursor: pointer"
                    >
                        <el-table-column label="序号" width="55" type="index" align="center" />
                        <el-table-column
                            label="印刷序列号"
                            min-width="120"
                            prop="printProduceNo"
                            align="center"
                        ></el-table-column>
                        <el-table-column
                            label="品种"
                            prop="breed"
                            min-width="160"
                            align="center"
                        ></el-table-column>
                        <el-table-column
                            label="组成"
                            min-width="160"
                            prop="composition"
                            align="center"
                        ></el-table-column>
                        <el-table-column
                            label="印数"
                            width="120"
                            prop="printAmount"
                            align="center"
                        ></el-table-column>
                        <el-table-column label="印色" width="120" prop="printColour" align="center">
                            <template #default="scope">
                                <dict-tag
                                    :options="ems_order_print_color"
                                    :value="scope.row.printColour"
                                />
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="版材数量"
                            width="120"
                            prop="sheetAmount"
                            align="center"
                        ></el-table-column>
                        <el-table-column
                            label="版材尺寸"
                            prop="sheetSize"
                            width="120"
                            align="center"
                        >
                            <template #default="scope">
                                <dict-tag
                                    :options="ems_machine_info_size"
                                    :value="scope.row.sheetSize"
                                />
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row> -->
    </el-dialog>
  </div>
</template>

<script setup>
import { getProduceOrderList, getProduceById } from "@/api/production/cover";
import { searchProduceList } from "@/api/production/supplementary.js";

const emit = defineEmits(["changeUpdate", "cancel"]);
const { proxy } = getCurrentInstance();
const {
  ems_machine_info_size,
  ems_order_make_up,
  ems_order_print_color,
  ems_order_breed_type,
} = proxy.useDict(
  "ems_order_breed_type",
  "ems_machine_info_size",
  "ems_order_make_up",
  "ems_order_print_color"
);

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  orderSelectList: {
    type: Array,
    default: () => {
      [];
    },
  },
  machineId: {
    type: String,
    default: "",
  },
});
const selectList = ref([]);
const orderRef = ref(null);
const orderList = ref([]);
const printList = ref([]);
const multiple = ref(true);
const selectRow = ref([]);
const loading = ref(false);
const loadingInfo = ref(false);
const orderListTable = ref(null);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});
watch(
  () => props.visible,
  (val) => {
    if (val) {
      handleQuery();
    }
  }
);
const total = ref(0);
const statusFlag = ref(false);
const allChecked = ref(false);
const goBack = () => {
  statusFlag.value = false;
  selectRow.value = [];
  allChecked.value = false;
};
// 选中当前生产单
const handleCellClick = (row) => {
  statusFlag.value = true;
  handleClick(row);
};
// 修改选中的值
const changeIds = (value) => {
  multiple.value = !printList.value.filter((item) => item.checked).length;
};
const changeAll = (val) => {
  printList.value.forEach((item) => {
    item.checked = val;
  });
  multiple.value = !printList.value.filter((item) => item.checked).length;
};
// 选中订单
const handleClick = (row) => {
  loadingInfo.value = true;
  getProduceById({ pid: row.produceId }).then((res) => {
    res.data.producePrintList.forEach((item) => {
      item.produceNo = res.data.produceNo;
      item.producePrintId = item.printId;
      item.createTime = undefined;
      res.data.produceProductList.forEach((ele) => {
        if (item.orderProductId == ele.orderProductId) {
          item.breed = ele.breedType;
          item.bookName = ele.bookName;
          item.orderNo = ele.orderNo;
          item.kaoban = ele.kaoban;
        }
      });
    });
    printList.value = res.data.producePrintList;
    loadingInfo.value = false;
  });
};

// 选中
const handleSelectionChange = (row) => {
  selectRow.value = row;
  multiple.value = !row.length;
};
// const handleSubmit = () => {
//     selectRow.value.forEach(each => {
//         let list = []
//         getProduceById({ pid: each.produceId }).then(res => {
//             res.data.producePrintList.forEach(item => {
//                 item.produceNo = res.data.produceNo
//                 item.producePrintId = item.printId
//                 item.createTime = undefined
//                 res.data.produceProductList.forEach(ele => {
//                     if (item.orderProductId == ele.orderProductId) {
//                         item.breed = ele.breedType
//                         item.bookName = ele.bookName
//                         item.orderNo = ele.orderNo
//                     }
//                 })
//             })
//             let array1 = res.data.producePrintList.filter(item => item.makeStatus == 2)
//             list = [...list, ...array1]
//             loadingInfo.value = false
//         })
//     })
//     emit('changeUpdate', list)
// }
const handleSubmit = async () => {
  const resultList = [];
  // 使用 Promise.all() 等待所有请求完成后再进行下一步操作
  await Promise.all(
    selectRow.value.map(async (each) => {
      const res = await getProduceById({ pid: each.produceId });
      const list = [];
      res.data.producePrintList.forEach((item) => {
        item.produceNo = res.data.produceNo;
        item.producePrintId = item.printId;
        item.createTime = undefined;
        res.data.produceProductList.forEach((ele) => {
          if (item.orderProductId == ele.orderProductId) {
            item.breed = ele.breedType;
            item.bookName = ele.bookName;
            item.orderNo = ele.orderNo;
          }
        });
      });
      // 将满足条件的项加入 list 中
      const array1 = res.data.producePrintList;
      list.push(...array1);
      // 将 list 加入到 resultList 中
      resultList.push(...list);
    })
  );
  // 关闭 loading
  loadingInfo.value = false;
  // 触发 changeUpdate 事件，并传递 resultList
  emit("changeUpdate", resultList);
};

const handleCancel = () => {
  proxy.resetForm("queryRef");
  emit("cancel");
};
const getList = async () => {
  loading.value = true;
  if (props.machineId) {
    queryParams.value.machineId = props.machineId;
  }
  const res = await searchProduceList(queryParams.value);
  loading.value = false;
  orderList.value = res.rows;
  total.value = res.total;
};
// 搜索
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
  proxy.resetForm("queryRef");
  handleQuery();
};

// getList()
</script>

<style lang="scss" scoped>
@import url("../../../assets/styles/card.scss");
</style>
